<template>

    <div>
        <el-button text :icon="Plus" type="success" @click="handleAddCmpnt">设置风格</el-button>
        <el-dialog title="字段风格" v-model="dialogVisible" width="80%" top="5%" :draggable="true"
            :close-on-click-modal="false" append-to-body @click.stop>
            <el-table class="field-editor" v-bind="$attrs" :data="dataList">
                <el-table-column label="标题/字段" align="center" min-width="120">
                    <template #default="scope">
                        <span>{{ scope.row.label }}{{ scope.row.title }}</span>
                        <span v-if="scope.row.name">({{ scope.row.name }})</span>
                    </template>
                </el-table-column>
                <el-table-column label="颜色" v-if="$attrs.showColorTagConf" align="center" min-width="180">
                    <template #default="scope">
                        <el-radio-group v-model="scope.row.colorTag" @change="onchange">
                            <el-radio-button label="背景色" value="tag" />
                            <el-radio-button label="字体色" value="color" />
                            <el-radio-button label="无" value="" />
                        </el-radio-group>
                    </template>
                </el-table-column>
                <el-table-column label="格式" v-if="$attrs.showFormatConf" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.format" @change="onchange" placeholder="格式" />
                    </template>
                </el-table-column>
            </el-table>
            </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { useAttrs, defineEmits,ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
let attrs = useAttrs()
const dataList = attrs['modelValue']
const emit = defineEmits(['change'])
const dialogVisible = ref(false)

const onchange = () => {
    emit('change', dataList)
}
const handleAddCmpnt = () => {
    dialogVisible.value = true
}
</script>
<style scoped>
.field-editor{
    height: 400px;
    overflow: auto;
}
</style>
